<template>
  <div class="snzxwz">
    <div class="handle rightHandle" v-show="rightVisible" @click="clickRight">
      <a-icon class="close-icon" type="left" title="展开" />
    </div>
    <map-draw ref="mapDrawId" />
    <div class="q-button-box">
      <div class="q-collapse-box">
        <a-collapse defaultActiveKey="1">
          <a-collapse-panel key="1" header="目标选择">
            <TargetList @clickRow="onClickRow" ref="targetListId" @querySuccess="onQuerySuccess" />
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <div class="spin_box">
      <a-spin :spinning="isLoading" :tip="tipTitle" size="large" />
    </div>
    <ManInfoDetail ref="manInfoDrawer" v-show="manInfoDetail.display" @close="manInfoDetailClose" />
  </div>
</template>

<script>
import TargetList from './components/targetList'
import ManInfoDetail from './components/ManInfoDetail'
import * as api from '@/api/wxSmuggle/eventModel.js'
import mapDraw from '../../modules/mapDraw'

export default {
  components: { TargetList, ManInfoDetail, mapDraw },
  data() {
    return {
      manInfoDetail: {
        display: false,
        detail: {},
        phoneNumber: ''
      },
      isLoading: false,
      tipTitle: '正在查询中...',
      rightVisible: false,
      pointList: [],
      taskId: '',
      modelId: ''
    }
  },
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    }
  },
  mounted() {
    this.getRouteQuery(this.$route)
  },
  methods: {
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.query && Object.keys($route.query).length > 0) {
        let query = $route.query
        this.taskId = query.taskId
        this.modelId = query.modelId
        let str = query.isOperation.toString()
        if (str == 'true') {
          this.$refs.targetListId.setOperation(true, query.taskId) //发起人
        } else {
          this.$refs.targetListId.setOperation(false, query.taskId) //发起人
        }
        this.manInfoDetail.display = false
        this.$refs.mapDrawId.removeOverlay()
      }
    },
    onClickRow(row) {
      // console.log(row)
      this.manInfoDetail.display = true
      this.rightVisible = false
      this.$refs.manInfoDrawer.listLoading = true
      this.isLoading = true
      api
        .queryDetailByPhone({ taskId: this.taskId, modelId: this.modelId, queryId: row.queryId })
        .then(res => {
          if (res.success) {
            //过滤空的经纬度
            // let resultArr = res.result.filter(item => item.longitude != '' && item.latitude != '')
            // this.$refs.manInfoDrawer.getData(row, resultArr)
            // this.pointList = resultArr
            this.$refs.manInfoDrawer.getData(row, res.result)
            this.pointList = res.result
            // 绘制轨迹
            if (this.pointList.length > 0) {
              let position = []
              let list = this.pointList.map((item, index) => {
                return {
                  key: index,
                  latitude: item.latitude,
                  longitude: item.longitude,
                  appearTime: item.appeartime,
                  address: item.address
                }
              })
              position.push({ list })
              this.$nextTick(() => {
                this.$refs.mapDrawId.drawTaskDetailsDrawer(position)
              })
            } else {
              this.$refs.mapDrawId.removeOverlay()
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.$refs.manInfoDrawer.listLoading = false
          this.isLoading = false
        })
    },
    onQuerySuccess() {
      console.log('dfksfjsd')
      // this.manInfoDetail.display=true
      // this.informationShow = true
    },
    manInfoDetailClose() {
      this.manInfoDetail.display = false
      this.rightVisible = true
    },
    clickRight() {
      this.rightVisible = false
      this.manInfoDetail.display = true
    }
  }
}
</script>

<style scoped lang="less">
.snzxwz {
  // position: absolute;
  // left: 218px;
  // right: 0;
  // top: 64px;
  // bottom: 0;
  position: relative;
  left: -10px;
  right: 0;
  top: -10px;
  bottom: 0;
  z-index: 800;
  overflow: hidden;
  /deep/span.BMap_Marker {
    img {
      display: none !important;
    }
  }
  .map-q {
    height: 837px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    background-color: rgb(243, 241, 236);
    color: rgb(0, 0, 0);
    text-align: left;
  }
  .q-button-box {
    position: absolute;
    left: 6px;
    top: 0;
    // width: 850px;
    // z-index: 5;
    padding: 15px;
    // cursor: pointer;
    display: flex;
    .q-collapse-box {
      width: 650px;
    }
  }

  .spin_box {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
.btn-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  padding: 15px;
  border-radius: 0 0 5px 0;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.6);
  &:hover {
    background-color: #fff;
  }
}
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100px);
  border-radius: 10px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  i {
    margin-right: 12px;
  }
}
.map-detail {
  font-size: 12px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
  padding: 3px;
}
.sign-main {
  width: 385px;
  height: 330px;
  background: #ffffff;
  border-radius: 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  .information_header {
    height: 45px;
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid #eeeeee;
    background-color: #fafafa;
    font-weight: 600;
    .close_icon {
      display: block;
      width: 100%;
      text-align: right;
      font-size: 36px;
      margin-top: -20px;
      span {
        cursor: pointer;
      }
    }
  }
  .information_title {
    line-height: 25px;
    font-size: 14px;
    overflow: hidden;
    margin: 10px 0 10px 15px;
    .information_title_span {
      float: left;
      width: 5px;
      height: 25px;
      background-color: blue;
      margin-right: 10px;
      margin-left: 5px;
    }
  }
  .information_main {
    margin: 15px 0 10px 15px;
    .information_main_row {
      margin-top: 15px;
    }
  }
}

::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  height: 20px !important;
}
::-webkit-scrollbar {
  width: 6px;
  background: #d9d9d9;
}
::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  height: 20px !important;
}
::-webkit-scrollbar {
  width: 6px;
  background: #ffffff;
}
.ryfl .ant-menu-item {
  width: 33%;
  text-align: center;
}
.total-info-container {
  width: 500px;
  background: #ffffff;
  /* height: 300px !important; */
  position: absolute;
  left: 20px;
  top: 100px;
  /* max-height: 500px; */
  overflow: scroll;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}
.total-info-container .ant-collapse-content.ant-collapse-content-active {
  max-height: 430px;
  overflow: scroll;
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
<style>
.sign:hover {
  cursor: pointer;
}
.manInfo {
  position: absolute;
  top: -95px;
  left: -55px;
  width: 140px;
}
.map-detail {
  text-align: center;
  background: #ffffff;
  padding: 2px;
  margin-top: 5px;
}
.total-info-container .ant-tabs-nav {
  width: 100%;
}
.total-info-container .ant-tabs-tab {
  width: 28%;
  text-align: center;
}
</style>
